<template>
    <div class="app-main">
        <el-tabs v-model="activeName" type="" @tab-click="handleClick">
            <el-tab-pane label="分红日历" name="first" lazy>
                <div class="head">
                    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
                        <el-form-item label="" prop="">
                            <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="分红状态：" prop="">
                            <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
                                <el-option v-for="(item, index) in statusLs" :key="index" :label="item.value"
                                    :value="item.id" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="listBox">
                    <div class="listBox_head">
                        <el-button type="primary" size="small" @click="handleAdd">添加分红日期</el-button>
                    </div>
                    <el-table v-loading="loading" :data="tableLs" stripe border>
                        <el-table-column label="序号" align="center" type="index" width="64px" />
                        <el-table-column label="分红日期" align="center" prop="bonusTime" :show-overflow-tooltip="true" />
                        <el-table-column label="持有CoCo人数" align="center" prop="cocoCustomerAmount"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="持有CoCo总数" align="center" prop="cocoAmount"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="分红金额" align="center" prop="bonusMoneyStr" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="分红人数" align="center" prop="customerAmount" :show-overflow-tooltip="true" />
                        <el-table-column label="实际发放金额" align="center" prop="actualMoney" :show-overflow-tooltip="true" />
                        <el-table-column label="分红状态" align="center" prop="status">
                            <template slot-scope="scope">
                                <dict-tag :options="statusLs" :value="scope.row.status" />
                            </template>
                        </el-table-column>
                        <el-table-column label="分红系数" align="center" prop="coefficient" :show-overflow-tooltip="true" />
                        <el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" @click="handleView(scope.row)"
                                    v-if="scope.row.status == 1">编辑</el-button>
                                <el-button size="mini" type="text" @click="removeView(scope.row)"
                                    v-if="scope.row.status == 1">删除</el-button>
                                <el-button size="mini" type="text" @click="imitateView(scope.row)"
                                    v-if="scope.row.status == 1">分红模拟</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </div>
            </el-tab-pane>
            <!-- 分红明细 -->
            <el-tab-pane label="分红明细" name="second" lazy>
                <div class="head">
                    <el-form :model="queryParamsDetail" ref="queryForm" :inline="true" v-show="showSearch">
                        <el-form-item label="" prop="">
                            <el-input v-model="queryParamsDetail.keyword" placeholder="用户昵称、姓名、手机号" clearable
                                @keyup.enter.native="handleQueryDetail" />
                        </el-form-item>
                        <el-form-item label="" prop="">
                            <el-date-picker v-model="dateTwo" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="handleQueryDetail"
                                size="small">搜索</el-button>
                            <el-button icon="el-icon-refresh" @click="resetQueryDetail" size="small">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="listBox">
                    <div class="listBox_head">
                        <export-excel-button title="分红明细" :size="'small'" action="/shenye/coco/bonus/detail/export"
                            :params="ExportParams" />
                    </div>
                    <el-table v-loading="loading" :data="tableLsDetail" stripe border>
                        <el-table-column label="序号" align="center" type="index" width="64px" />
                        <el-table-column label="分红日期" align="center" prop="bonusTime" :show-overflow-tooltip="true" />
                        <el-table-column label="用户" align="center" prop="customerName" :show-overflow-tooltip="true" />
                        <el-table-column label="手机号" align="center" prop="phone" :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column label="分红金额" align="center" prop="bonusMoney" :show-overflow-tooltip="true" />
                        <el-table-column label="当时持有CoCo" align="center" prop="cocoAmount" :show-overflow-tooltip="true" />
                    </el-table>
                    <pagination v-show="totalDetail > 0" :total="totalDetail" :page.sync="queryParamsDetail.pageNum"
                        :limit.sync="queryParamsDetail.pageSize" @pagination="getListDetail" />
                </div>
            </el-tab-pane>
        </el-tabs>

        <!-- 添加分红日期弹窗 -->
        <Dialog ref="dialog" @refresh="getList"></Dialog>
        <!-- 模拟结果 -->
        <imitate-dialog ref="imitateDialogRef"></imitate-dialog>
    </div>
</template>
  
<script>
import {
    bonusList, removeBonus, detailList
} from "@/api/integralOperation/CoCoBonus";
import Dialog from "./components/dialog";
import imitateDialog from "./components/imitateDialog.vue"
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
    // dicts: ['equity_card_issue_type', 'equity_card_sell_status'],
    name: "",
    components: {
        Dialog,
        imitateDialog,
        ExportExcelButton
    },
    data() {
        return {
            activeName: 'first',
            //日期
            date: [],
            // 遮罩层
            loading: false,
            // 导出遮罩层
            exportLoading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            tableLs: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                startTime: '', //开始时间
                endTime: '', //结束时间
                status: '',//分红状态 1 待分红 2 已分红 shenye_coco_bonus_status
            },
            statusLs: [], //分红状态下啦
            dateTwo: [],
            queryParamsDetail: {
                pageNum: 1,
                pageSize: 10,
                keyword: '',//用户昵称、姓名、手机号
                startTime: '', //开始时间
                endTime: '', //结束时间
            },
            // 分红明细数组
            tableLsDetail: [],
            //分红明细总数
            totalDetail: 0,
        };
    },
    computed: {
        ExportParams() {
            const params = {
                ...this.queryParamsDetail,
            };
            return params;
        },
    },
    created() {
        this.getDictStatus();
        this.getList();
        this.getListDetail();
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        //获取分红状态字典
        getDictStatus() {
            var dictType = "shenye_coco_bonus_status";
            this.$getSelectList(dictType)
                .then((res) => {
                    this.statusLs = res.result[0].dictList;
                })
                .finally(() => { });
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            bonusList(this.queryParams).then(response => {
                this.tableLs = response.result.records;
                this.tableLs = this.tableLs.map(item => {
                    // console.log('item',item)
                    Object.keys(item).forEach(key => {
                        if (item[key] === '') {
                            item[key] = '-'
                        }
                    })
                    return item
                })
                this.total = response.result.total;
                this.loading = false;
            });
        },
        // 表单重置
        reset() {
            this.date = []
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                startTime: '', //开始时间
                endTime: '', //结束时间
                status: '',//分红状态 1 待分红 2 已分红 shenye_coco_bonus_status
            }

            // this.resetForm("form");
            this.handleQuery()
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.startTime = this.date[0];
            this.queryParams.endTime = this.date[1];
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            // this.resetForm("queryForm");
            this.reset();
        },
        /** 搜索明细列表按钮操作 */
        handleQueryDetail() {
            this.queryParamsDetail.startTime = this.dateTwo[0];
            this.queryParamsDetail.endTime = this.dateTwo[1];
            this.queryParamsDetail.pageNum = 1;
            this.getListDetail();
        },
        /** 查询分红明细列表 */
        getListDetail() {
            this.loading = true;
            detailList(this.queryParamsDetail).then(response => {
                this.tableLsDetail = response.result.records;
                this.totalDetail = response.result.total;
                this.loading = false;
            });
        },
        // 重置分红明细
        resetQueryDetail() {
            this.dateTwo = []
            this.queryParamsDetail = {
                pageNum: 1,
                pageSize: 10,
                keyword: '',//用户昵称、姓名、手机号
                startTime: '', //开始时间
                endTime: '', //结束时间
            }
            this.getListDetail()
        },

        /** 新增按钮操作 */
        handleAdd() {
            this.$refs.dialog.open();
        },
        /** 详情按钮操作 */
        handleView(row) {
            this.$refs.dialog.open(row.id);
        },
        // 删除操作
        removeView(row) {
            this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeBonus(row.id).then(response => {
                    this.$message.success('操作成功');
                    this.resetQuery()
                }).catch(() => {

                })
            }).catch(() => { });
        },
        /**  */
        imitateView(row) {
            this.$refs.imitateDialogRef.open(row.id);
        },
    }
};

</script>
<style scoped>
.app-main {
    padding: 20px;
}

.head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
}

.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
}

.listBox_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
}</style>
  